<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>生日快乐</title><!-- 这是网页标题 -->
  <link rel="stylesheet" href="css/style3.css">
  <style>
    body {
      overflow: hidden;
      margin: 0;
    }

    h1 {
      position: fixed;
      top: 30%;
      left: 0;
      width: 100%;
      text-align: center;
      transform: translateY(-50%);
      font-family: 'Love Ya Like A Sister', cursive;
      font-size: 60px;
      color: #8b6a60;
      padding: 0 20px;
    }

    h1 span {
      position: fixed;
      left: 0;
      width: 100%;
      text-align: center;
      margin-top: 30px;
      font-size: 40px;
    }
  </style>

</head>

<body>

  <h1 id="h1"></h1>
  <div class="stars">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
  </div>
  <audio autoplay="autoplay" loop="loop" preload="auto" src="./images/生日快乐.mp3" autoplay>
  </audio>
  <script>

    window.onload = function starttime() {
      time(h1, '2006/07/13');     // 出生年月日
      ptimer = setTimeout(starttime, 1000); // 添加计时器
    }

    function time(obj, futimg) {
      var nowtime = new Date().getTime(); // 现在时间转换为时间戳
      var futruetime = new Date(futimg).getTime(); // 未来时间转换为时间戳
      var msec = nowtime - futruetime; // 毫秒 未来时间-现在时间
      var time = (msec / 1000);  // 毫秒/1000
      var day = parseInt(time / 86400); // 天  24*60*60*1000 
      var hour = parseInt(time / 3600) - 24 * day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
      var minute = parseInt(time % 3600 / 60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
      var second = parseInt(time % 60);  // 以60秒为一整份 取余 剩下秒数
      obj.innerHTML = "<br>你已经来到这个世界：<br>" + day + "天" + hour + "小时" + minute + "分" + second + "秒了" + "<br><span>这是一个特别的生日祝福！</span>"
      if (msec == 0) {
        window.location.href = "main.html";
      }
      return true;
    }
  </script>
  <img src="右.png" style="right:20px;bottom:50%;position:absolute;width:80px;height:80px;cursor: pointer;z-index:1000"
    class="right" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    var a = $('.right');
    a.click(function () {
      window.location.href = 'pictures.html';
    });
    (function () {
      setTimeout(() => {
        audioAutoPlay()
      }, 100);
    }())
    document.addEventListener('touchstart', audioAutoPlay)
    function audioAutoPlay() {
      var audio = document.querySelector('audio');
      audio.play()
    }
  </script>
</body>

</html>